{% set isNarrow = true %}

{% extends "./layout/layout.html" %}

{% block content %}
<div class="container">

  {% if isLogin %}
  <p>欢迎{{userName}}，您已登录，不需要再次注册，请返回<a href="/">首页</a></p>
  {% else %}
  <h1>注册</h1>
  <hr>
  <form>
    <div class="form-group">
      <label for="input-username">用户名</label>
      <input type="text" class="form-control" id="input-username" placeholder="请输入用户名">
      <p class="username-info"></p>
    </div>
    <div class="form-group">
      <label for="input-password">密码</label>
      <input type="password" class="form-control" id="input-password" placeholder="请输入密码">
    </div>
    <div class="form-group">
      <label for="repeat-input-password">确认密码</label>
      <input type="password" class="form-control" id="repeat-input-password" placeholder="重新输入密码">
      <p class="password-info"></p>
    </div>
    <div class="form-group">
      <label for="select-gender">性别</label>
      <select class="form-control" id="select-gender">
        <option value="1">男</option>
        <option value="2">女</option>
        <option value="3">保密</option>
      </select>
    </div>

    <button type="submit" class="btn btn-primary register">注册</button>
    <a href="/login">已有账号，返回登录>></a>
  </form>
  {% endif %}
</div>
{% endblock %}

{% block js %}
<script>
  let usernameTimeoutId;
  let passwordTimeoutId;
  let isPasswordSame = false;
  let isUsernameExist = true;

  // 监听用户名是否存在
  $("#input-username").on("input", function () {
    // 做一个防抖
    if (usernameTimeoutId) {
      clearTimeout(usernameTimeoutId);
    }

    usernameTimeoutId = setTimeout(function () {
      const userName = $("#input-username").val();
      ajax.post("/api/user/isExist", { userName }, function (err, data) {
        if (err) {
          $(".username-info").text("用户名可用")
          isUsernameExist = false;
          return;
        }
        $(".username-info").text("用户名已存在")
        isUsernameExist = true;
      })
      /* $.ajax({
        type: "post",
        url: "/api/user/isExist",
        data: { userName },
        success: function (result) {
          console.log(result)
          if (result.errno === 0) {
            $(".username-info").text("用户名已存在")
            isUsernameExist = true;
          } else {
            $(".username-info").text("用户名可用")
            isUsernameExist = false;
          }
        },
        error: function (err,) {
          console.log(err)

        }
      }) */

    }, 500)
  })

  // 监听密码是否一致
  $("#repeat-input-password").on("input", function () {
    // 做一个简单的防抖
    if (passwordTimeoutId) {
      clearTimeout(passwordTimeoutId)
    }

    passwordTimeoutId = setTimeout(function () {
      // 获取密码
      const password = $("#input-password").val();
      const repeatInputPassword = $("#repeat-input-password").val();

      if (password === repeatInputPassword) {
        $(".password-info").text("两次密码一致");
        $(".password-info").css({ color: "green" })
        isPasswordSame = true;
      } else {
        $(".password-info").text("两次密码不一致")
        $(".password-info").css({ color: "red" })
        isPasswordSame = false;
      }

    }, 500)
  })

  // 注册事件
  $(".register").click(function (e) {
    // 阻止表单提交的默认行为
    e.preventDefault();

    // 判断用户名是否存在
    if (isUsernameExist) {
      alert("用户名已存在，请输入新的用户名！");
      return;
    }

    // 如果两次密码不一致
    if (!isPasswordSame) {
      alert("两次密码不一致，请重新输入！");
      return;
    }

    // 获取用户名，密码，性别
    const userName = $("#input-username").val();
    const password = $("#input-password").val();
    const gender = parseInt($("#select-gender").val());

    ajax.post("/api/user/register",
      { userName, password, gender },
      function (err, data) {
        if (err) {
          alert(err);
          return;
        }
        location.href = "/login"
      })
    /*     $.ajax({
          type: "post",
          url: "/api/user/register",
          contentType: "application/json;charset=utf-8",
          // JSON.parse() 将json格式的字符串转换为js对象
          // JSON.stringify() 将对象转换为json格式的字符
          data: JSON.stringify({ userName, password, gender }),
          success: function (result) {
            console.log(result)
            if (result.errno === 0) {
              location.href = "/login"
            } else {
              alert(result.message)
            }
          },
          error: function (err) {
            console.log(err)
            alert("注册失败！")
          }
        })
     */
  })

</script>
{% endblock %}